<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="rdTitle">标题</th>
							<th class="text-center" data-field="createTime">创建时间</th>
							<th class="text-center" data-field="name">所属类型</th>
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
	<!-- Large modal -->
	<div id="modal" class="modal fade bs-example-modal-lg" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">添加</h4>
				</div>
				<div class="modal-body">
					<div class="input-group">
						<span class="input-group-addon">标题：</span> <input type="text" class="form-control" id="dom1" value="" aria-describedby="basic-addon1">
					</div>
					<br/>
					<div class="input-group">
						<span class="input-group-addon">所属类型：</span> <select id="type" class="form-control">
							<option value="">请选择...</option>
						</select>
					</div>
					<br />
					<div class="input-group">
						<span class="input-group-addon">办理流程</span>
						<textarea style="width: 100%; height: 500px;" class="form-control" rows="30" id="column1_textarea" name="kindEditor_content"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button id="submitBtn" type="button" class="btn btn-primary" onclick="adopt();">提交</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 添加电话 -->
	<div id="applyModal" class="modal fade bs-example-modal-lg" role="dialog">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">联系电话</h4>
				</div>
				<div class="modal-body">
					<div class="form-group" style="height: 8px;width: 100%;">
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">单位</strong>
						</div>
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">电话</strong>
						</div>
						<div class="col-sm-3">
						<strong style="text-align: center;display: block;">地址</strong>
						</div>
						<div class="col-sm-3">
						<button type="button" class="glyphicon glyphicon-plus" style="margin-right: 10px" onclick="addField()"></button>
						</div>
					</div>
					
				</div>
				<div id="field">
<!-- 					<div class="row" style="width: 100%;margin-left: 10px;"> -->
<!-- 						<div class="col-sm-3"> -->
<!-- 						<input  type="text" class="form-control" name="uuit"> -->
<!-- 						</div> -->
<!-- 						<div class="col-sm-3"> -->
<!-- 						<input  type="text" class="form-control" name="tel"> -->
<!-- 						</div> -->
<!-- 						<div class="col-sm-3"> -->
<!-- 						<input  type="text" class="form-control" name="address"> -->
<!-- 						</div> -->
<!--                     </div> -->
       			 </div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="insertTel();">保存</button>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
<!-- kindeditor 编辑器 -->
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	
	var editor;
	var rdId="";
	var options={
			items : [ 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter',
						'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|',
						'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|',
						'image', 'multiimage', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '|', 'about' ], //配置kindeditor编辑器的工具栏菜单项
				cssPath : 'kindeditor-4.1.10/plugins/code/prettify.css',
				allowFileManager : true,
				uploadJson : '${pageContext.request.contextPath}/upload_img.do', //上传
				extraFileUploadParams : {
					mienId : ''
	        	},
				filterMode : true, //是否启用过滤模式(编辑文本框中是否可以出现控件显示)
				htmlTags : {
					span : [ '.color', '.background-color', '.font-size', '.font-family', '.background', '.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height' ],
					font : [ 'id', 'class', 'color', 'size', 'face', '.background-color' ],
					a : [ 'id', 'class', 'href', 'target', 'name' ],
					embed : [ 'id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess' ],
					img : [ 'id', 'class', 'src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border' ],
					'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [ 'id', 'class', 'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background', '.font-weight',
							'.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left' ],
					pre : [ 'id', 'class' ],
					hr : [ 'id', 'class', '.page-break-after' ],
					'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : [ 'id', 'class' ],
					iframe : [ 'id', 'class', 'src', 'frameborder', 'width', 'height', '.width', '.height' ]
				},
				allowFileManager : true,
				allowUpload : true, //允许上传图片
				imageUploadJson : '/saveImg', //服务端上传图片处理URI
				resizeType : 0,//使其不可以拖动 
				afterCreate : function() {
					/* var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
					}); */
				},
				afterBlur : function() {
					this.sync();
				}
			}
	
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="kindEditor_content"]', options);
	});
	
	function actionFormatter(value, row, index) {
		return "<button class='btn btn-success btn-xs glyphicon glyphicon-file' onclick='showModal2(\"" + row.rdId + "\");'>添加联系方式</button>"+
				"&nbsp;<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showModal(\"" + row.rdId + "\");'>编辑</button>"+
				"&nbsp;<button class='btn btn-danger btn-xs like' onclick='del(\"" + row.rdId + "\");'>删除</button>";
	}

	var table_dataset = [ {
		field : 'rdTitle',
		align : 'center',
	}, {
		field : 'createTime',
		align : 'center',
		formatter : function timeFormatter(value, row, index) {
			return (new Date(row.createTime)).Format("yyyy-MM-dd hh:mm:ss");
		}
	}, {
		field : 'name',
		align : 'center',
	}, {
		align : 'center',
		width : 300,
		formatter : actionFormatter,
	} ];

	$('#table').bootstrapTable({
		url : "${pageContext.request.contextPath}/RD/selectRdPage",
		idField : "rdId",
		columns : table_dataset,
		striped : true, //是否显示行间隔色
		pagination : true, //是否显示分页
		pageSize : 10, //每页的记录行数
		pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
		search : false, //是否显示搜索
		showRefresh : true,
		sidePagination : "server", //表示服务端请求  
		queryParamsType : "limit",
		queryParams : function queryParams(params) { //设置查询参数  
			var param = {
				offset : params.offset,
				limit : params.limit
			};
			return param;
		},
		toolbar : "<button class='btn btn-primary glyphicon glyphicon-plus' onclick='showModal(\"" + '' + "\");'>新增数据</button>",
		// 						+"&nbsp;<button class='btn btn-danger glyphicon glyphicon-trash'>批量删除</button>",
		icons : {
			paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
			paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
			refresh : 'glyphicon-refresh icon-refresh',
			toggle : 'glyphicon-list-alt icon-list-alt',
			columns : 'glyphicon-th icon-th',
			detailOpen : 'glyphicon-plus icon-plus',
			detailClose : 'glyphicon-minus icon-minus',
			"export" : 'glyphicon-export icon-share'
		},
		showExport : true,
		exportDataType : 'basic',
		exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ],
	});



	$(function() {
		$.ajax({
			url : "${pageContext.request.contextPath}/civilian/seleteCivilianTypeByCode",
			type : "post",
			data : {
				code : "xgbm"
			},
			dataType : "json",
			success : function(data) {
				var list = data['list'];
				var types = "<option value=''>请选择...</option>";
				for (var i = 0; i < list.length; i++) {
					types += "<option value='"+list[i].code+"'>" + list[i].name + "</option>";
				}
				$("#type").html(types);
			}
		});
	});

	function showModal2(id) {
			rdId=id;
			
 			$.ajax({
 				url : "${pageContext.request.contextPath}/RD/selectByRdId",
 				type : "get",
 				data : {
 					rdId : rdId
 				},
 				dataType : "json",
 				success : function(data) {
 					var tel=data.list;
 					var html="";
 					if(tel.length==0){
 						$('[name="uuit"]').val('');
 						$('[name="tel"]').val('');
 						$('[name="address"]').val('');
 						addField1();
 					}else{
 						$("#field").html('');
 						var h="<div class='row' style='width: 100%; margin-left: 10px;'><br/>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[0].tUuit+" name='uuit'></div>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[0].tTel+" name='tel'></div>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[0].tAddress+" name='address'></div>"
 	 								+"</div>"
 						for(var i=1;i<tel.length;i++){
 								html += "<div class='row' style='width: 100%; margin-left: 10px;'><br/>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[i].tUuit+" name='uuit'></div>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[i].tTel+" name='tel'></div>"
 	 								+"<div class='col-sm-3'><input  type='text' class='form-control' value="+tel[i].tAddress+" name='address'></div>"
 	 								+"<div class='col-sm-3'><button type='button' class='glyphicon glyphicon-remove' style='margin-right: 10px' onclick='delField(this.parentNode.parentNode)'></button></div>"
 	 								//+"<div class='col-sm-3'><button type='button' class='glyphicon glyphicon-remove' style='margin-right: 10px' onclick='delField(this.parentNode.parentNode,\""+tel[i].tId+"\")'></button></div>"
 	 								+"</div>";
 							
 							
 						}
 						$("#field").html(h+html);
 					}
 				},
 				error : function() {
 					layer.msg('系统异常!', {
 						icon : 2,
 						time : 800
 					});
 				}
 			});
			$('#applyModal').modal({
				backdrop : 'static',
				keyboard : false
			});
		}
	function showModal(id) {
		rdId=id;
		if(id==""){
			$("#dom1").val('');
			$("#type").val('');
			editor.html('');
			$('#modal').modal({
				backdrop : 'static',
				keyboard : false
			});
		}else{
			$.ajax({
				url : "${pageContext.request.contextPath}/RD/selectById",
				type : "get",
				data : {
					rdId : rdId
				},
				dataType : "json",
				success : function(data) {
					var rd=data.rd;
					console.log(rd);
					editor.html('');
					$("#dom1").val(rd.rdTitle);
					$("#type").val(rd.s1);
					editor.insertHtml(rd.rdContent);
					$('#modal').modal({
						backdrop : 'static',
						keyboard : false
					});
				},
				error : function() {
					layer.msg('系统异常!', {
						icon : 2,
						time : 800
					});
				}
			});
		}
			
	}

	function adopt() {
		$("#submitBtn").button('loading');
		var rdTitle = $("#dom1").val();
		var s1 = $("#type").val();
		var rdContent=$("#column1_textarea").val();
		
		if (rdTitle === '' || s1 === '' || rdContent === '') {
			layer.alert("新增的数据中填写不完整!");
			$("#submitBtn").button('reset');
			return false;
		}
		
		if(editor.isEmpty()){
			layer.alert("新增的数据中填写不完整!");
			$("#submitBtn").button('reset');
			return false;
		}
		var url=rdId==='' ? "${pageContext.request.contextPath}/RD/insertRd":"${pageContext.request.contextPath}/RD/updateRd";
		$.ajax({
			url : url,
			type : "post",
			data : {
				rdId:rdId,
				rdTitle : rdTitle,
				s1 : s1,
				rdContent : rdContent
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						$("#table").bootstrapTable('refresh');
						$("#modal").modal("hide");
					}, 1000);
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
				}
				$("#submitBtn").button('reset');
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
				$("#submitBtn").button('reset');
			}
		});
	}


	function del(id) {
		layer.confirm("是否删除此项？", function(index) {
			$.ajax({
				url : "${pageContext.request.contextPath}/RD/deleteRd",
				type : "post",
				data : {
					rdId : id
				},
				dataType : "json",
				success : function(data) {
					if (data.result === 1) {
						layer.msg('操作成功!', {
							icon : 1,
							time : 800
						});
						setTimeout(function() {
							$("#table").bootstrapTable('refresh');
						}, 500);
					} else {
						layer.msg('操作失败!', {
							icon : 2,
							time : 800
						});
					}
				},
				error : function() {
					layer.msg('系统繁忙，请稍后再试!', {
						icon : 5,
						time : 800
					});
				}
			});
		});
	}
	
	function addField() {
        var html ="<div class='row' style='width: 100%; margin-left: 10px;'><br>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='uuit'></div>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='tel'></div>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='address'></div>"
		+"<div class='col-sm-3'><button type='button' class='glyphicon glyphicon-remove' style='margin-right: 10px' onclick='delField(this.parentNode.parentNode,"+''+")'></button></div>"
		+"</div>";
        $("#field").append(html);
        //console.log(html);
    }
	
	function addField1() {
        var html ="<div class='row' style='width: 100%; margin-left: 10px;'>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='uuit'></div>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='tel'></div>"
		+"<div class='col-sm-3'><input  type='text' class='form-control' name='address'></div>"
		+"</div>";
    	$("#field").html(html);
    }
	
	function delField(obj) {
		//console.log(tid);
			obj.parentNode.removeChild(obj);
		
    }
	
	function insertTel(){
		var tUuit = '';
        var tTel = '';
        var tAddress = '';
      /*   $.each($('[name="uuit"]'),function (k,v) {
        	tUuit += v.value + ',';
        }); */
       
        for(var i=0;i<$('[name="tel"]').length;i++){
        	if($('[name="uuit"]')[i].value!="" & $('[name="tel"]')[i].value!=""){
        		if (!(/^1[3|4|5|8][0-9]\d{4,8}$/.test($('[name="tel"]')[i].value))) {
        			layer.alert("不是完整的11位手机号或者正确的手机号前七位！");
        			return false;
        		}
        		tUuit += $('[name="uuit"]')[i].value + ',';
        		tTel += $('[name="tel"]')[i].value + ',';
        		if($('[name="address"]')[i].value==''){
        			tAddress += '无'+ ',';
        		}else{
        			tAddress += $('[name="address"]')[i].value + ',';
        		}
        	}
        	//console.log($('[name="uuit"]')[i].value+"::"+$('[name="tel"]')[i].value);
        }
        tTel = tTel.substring(0, tTel.length - 1);
        tUuit = tUuit.substring(0, tUuit.length - 1);
        tAddress = tAddress.substring(0, tAddress.length - 1);
       /*  console.log(tUuit);
        console.log(tTel);
        console.log(tAddress); */
        
        $.ajax({
			url : "${pageContext.request.contextPath}/RD/insertTel",
			type : "post",
			data : {
				rdId:rdId,
				tUuit : tUuit,
				tTel : tTel,
				tAddress : tAddress
			},
			dataType : "json",
			success : function(data) {
				var result = data['result'];
				if (result === 1) {
					layer.msg('操作成功!', {
						icon : 1,
						time : 800
					});
					setTimeout(function() {
						$("#applyModal").modal("hide");
					}, 1000);
				} else {
					layer.msg('操作失败!', {
						icon : 2,
						time : 800
					});
				}
			},
			error : function() {
				layer.msg('系统繁忙，请稍后再试!', {
					icon : 2,
					time : 800
				});
			}
		});  
        
	}

</script>
</html>
